import React, { Component, Fragment } from 'react';
import { Table, Input, Button, Space, Modal } from 'antd'
import Highlighter from 'react-highlight-words';
import { SearchOutlined } from '@ant-design/icons';

class BaseTable extends Component {
    constructor(props) {
        super(props)
    }

    getColumnSearchProps = dataIndex => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => {
                        this.searchInput = node;
                    }}
                    placeholder={`请输入搜索项`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ width: 188, marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        搜索
                    </Button>
                    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        重置
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) =>
            record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
        onFilterDropdownVisibleChange: visible => {
            if (visible) {
                setTimeout(() => this.searchInput.select());
            }
        },
        render: text =>
            this.state.searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[this.state.searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                    text
                ),
    });

    handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
        });
    };

    handleReset = clearFilters => {
        clearFilters();
        this.setState({ searchText: '' });
    };

    render(columns, dataSource, configure) {
        let { scroll, pageSize, rowSelection, rowKey, loading, onChange, current, total, pageSizeOptions, isPagination } = configure
        return (
            <Table
                scroll={scroll == undefined ? null : scroll}
                rowSelection={rowSelection == undefined ? null : rowSelection}
                columns={columns}
                dataSource={dataSource}
                loading={loading == undefined ? false : loading}
                rowKey={rowKey == undefined ? null : rowKey}
                //是否做分页查询
                pagination={ isPagination ? {
                    pageSize: pageSize == undefined ? null : pageSize,
                    onChange: onChange == undefined ? null : onChange,
                    current: current == undefined ? null : current,
                    total: total == undefined ? null : total,
                    pageSizeOptions:pageSizeOptions == undefined ? [10,20,50] : pageSizeOptions
                } : {
                    pageSize: pageSize == undefined ? null : pageSize,
                }}
            >
            </Table>
        )
    }
}

export default BaseTable